<template>
  <view class="main">
    <ForOneHeader :showLeft="false" :placeholder="false" />
    <div class="box bg">
      <div class="align-center">
        <view class="mid">
          <view class="card transparent">
            <div class="top-content">
              <div class="flex-row">
                <div class="bold">五大品类</div>
                <div class="normal margin-left-9">产品展示</div>
              </div>
              <div class="font-20">Five categories of product display</div>
            </div>
          </view>

          <up-image v-for="(item, index) in categories" :key="index" width="640rpx" height="190rpx" :src="item.main_image"
            radius="16" @tap="onTap(item,index)" :showMenuByLongpress="false">
          </up-image>
        </view>
      </div>
    </div>
  </view>
</template>

<script setup lang="ts">
import { getCategoryList } from '@/api/index'
import { ref, onMounted } from 'vue'
import { onLaunch, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { shareUtils } from '@/utils/share';
import useShare from '@/mixins/share';

const {getShareCover} = useShare()

const page = getCurrentPages().pop()

let path: string = page.route

const share_path = shareUtils.buildPathQuery(path)
onShareAppMessage(() => {

  const promise = new Promise(resolve => {
    getShareCover(path, null, null).then(res => {

      res.path = share_path

      debugger
      resolve(res)

    })
  })

  return {
    path: share_path,
    imageUrl: null,
    promise
  }
})



onShareTimeline(() => {

  const promise = new Promise(resolve => {
    getShareCover(path, null, null).then(res => {

      res.path = share_path

      debugger
      resolve(res)

    })
  })

  return {
    path: share_path,
    imageUrl: null,
    promise
  }
})


const categories = ref([
  {
    main_image: ''
  },
  {
    main_image: ''
  },
  {
    main_image: ''
  },
  {
    main_image: ''
  }
])
onMounted(() => {

  getCategoryList().then((res) => {
    categories.value = res
  })
})


const onTap = (item,index) => {
  if(index == 0){
    uni.navigateTo({
      url: `/pages/walls/index`
    })
  }else if(index == 1){
    uni.navigateTo({
      url: `/pages/grilles/index`
    })
  }else if(index == 2){
    uni.navigateTo({
      url: `/pages/door/index`
    })
  }else if(index == 3){
    uni.navigateTo({
      url: `/pages/cupboard/index`
    })
  }else if(index == 4){
    uni.navigateTo({
      url: `/pages/hardware/index`
    })
  }else{
    uni.navigateTo({
      url: `/pages/search/index?c1Id=${item.path}`
    })
  }
}
</script>

<style scoped lang="scss">
.box {
  height: 100%;
}

.card {
  width: 640rpx;
  height: 190rpx;
  background-position: center;
  background-size: contain;
  position: relative;
  border-radius: 14rpx;
  background-color: #eee;
}

.transparent {
  background-color: transparent;
}

.top-content {
  position: absolute;
  left: 0;
  bottom: -20rpx;

  .zh {}
}

.bg {
  background-image: url('https://catalogs.huiyichina.net/category-bg.jpg');
  background-color: #eee;
  background-size: 100% 100%;
  background-position: 50% 50%;
  background-repeat: repeat;
}

.align-center {
  height: 100%;
}

.main {
  height: 100vh;
}

.layout {
  margin: auto;
  display: flex;
  flex-direction: column;
}

.mid {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
</style>
